<!DOCTYPE html>
<html>
  <head>
    <!-- 
      base标签：
      一个页面只能有一个base标签，多个base将只有第一个生效。
      base一般写在前面，base前面不能出现含有uri路径属性的标签。
      基本所有的浏览器都支持base
      任何一个DOM节点 如 document.body.baseURI 都可以得到base标签设置的url，如果未设置将得到当前页面的url，即location.href
    -->
    <!-- 
      让所有的点击跳转页面 都跳转到新的页签，这直接这样写：
      （至于什么捕获阶段事件拦截，什么beforeUnload事件，都不是最佳的）
     -->
    <!-- <base target="_blank" /> -->
    <!-- 加上这个，就可以在本页面正确的使用（非.前缀的）相对路径了： -->
    <base href="http://localhost:1240" id="__base__host__" />

    <meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=9)" />
    <meta http-equiv="Page-Exit" content="revealTrans(duration=2,transition=9)" />
    <meta http-equiv="Pics-label" content="" />
    <!-- 
      所有的样式一定要 写在head中
      理论上写在任何地方都行，但写在后面的外部样式，在网络延迟时，会出现页面短暂的无样式现象：这说明新加入的样式会引起页面渲染的回溯
      （如果没有回溯，就无法应用新样式）样式写在后面还会带来初次渲染的性能问题！
     -->
    <style>
      .item {
        padding: 2px 4px;
        margin: 8px 0;
        border: 1px solid currentColor;
        border-radius: 4px;
        display: inline-block;
        text-decoration: dashed;
        transition: all 0.2s linear;
      }

      .item:visited,
      .item {
        color: rgb(80, 26, 90);
      }

      .item:hover {
        color: #0000ee;
        box-shadow: 0 0 4px currentColor;
      }
      /*  */

      @media (prefers-color-scheme: dark) {
        body {
          background-color: black;
        }
      }
    </style>
  </head>

  <body>
    <a class="item" href="src/css-global-values.html">css全局values</a>
    <a class="item" href="src/promise/test.html">promise测试 & margin测试</a>
    <a class="item" href="src/mouse-events/index.html">mouse事件测试</a>
    <a class="item" href="src/CMBC/cmbc.html">CMBC & replace ele</a>

    <a href="src/drag-file.html" class="item">文件拖动</a>
    <a class="item" href="src/render-frame.html">帧（frame）</a>

    <a href="src/workers/index.html" class="item">ServiceWorker初探</a>
    <a href="src/houdini/index.html" class="item">houdini研究</a>
    <a href="src/viewportTest.html" class="item">ViewPort相关测试</a>
    <a href="src/test/index.html" class="item">临时测试</a>

    <div style="padding: 24px 12px; background-color: #eee">
      <a class="item" href="src/baks/interval-sAddBoWhereIs.html">interval模型、选择器（+，~，:is）</a>
      <a class="item" href="src/baks/css-inline-block.html">inline/block概念、元素对齐间隙</a>
      <a class="item" href="src/baks/item-root-find.html">寻找DOM节点的祖先节点</a>
      <a href="src/baks/request/index.html" class="item">请求测试</a>
    </div>
    <script>
      const BASE_ID = '__base__host__';
      const PROXY_CONTEXT = '/vanilla/';

      (function (id, context) {
        let url = window.location.href;
        if (new RegExp(context).test(url)) {
          const host = url.split(context)[0] + context;
          const baseEle = document.getElementById(id);
          baseEle.setAttribute('href', host);
        }
      })(BASE_ID, PROXY_CONTEXT);
    </script>
  </body>
</html>
